<div class="box box-default">
  <div class="box-body">
    <form class="form-inline">
      <div class="box box-default">
        <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-left:0px !important;">
          <button class="btn btn-primary" type="button" (click)="showRoleControlInfo('add',null)">
            <i class="fa fa-edit"></i>添加</button>
          <button type="button" class="btn btn-box-tool pull-right" data-widget="collapse">
            <i class="fa fa-minus"></i>
          </button>
        </div>
        <div class="box-body" style="display:block;">
          <div class="form-group" style="margin-top:10px !important;padding-left:5px !important;">
            <label class=" control-label">角色名:</label>
            <input type="email" class="form-control" id="" placeholder="" [(ngModel)]="roleListPost.sRolename" name="sRolename">
            <button type="button" class="btn btn-primary" (click)="getRoleList()">
              <i class="fa fa-search"></i>查询</button>
          </div>
        </div>
      </div>
    </form>
    <div style="overflow-x:scroll;width:100%">
      <table id="list_table" class="table table-bordered table-keep-line table-hover table-striped" style="margin-top:10px;">
        <thead>
          <tr>
            <th class="width-25" (click)="orderData('sRolename')">角色名<i class="fa fa-sort"></i></th>
            <th class="width-25" (click)="orderData('sDesc')">角色说明<i class="fa fa-sort"></i></th>
            <th class="width-25" (click)="orderData('sDeptname')">所属部门<i class="fa fa-sort"></i></th>
            <th class="width-25">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of roleList;">
            <td class="short_name" (dblclick)="showRoleControlInfo('edit',item)" [attr.title]="item.sRolename">{{item.sRolename}}</td>
            <td class="short_name" (dblclick)="showRoleControlInfo('edit',item)" [attr.title]="item.sDesc">{{item.sDesc}}</td>
            <td class="short_name" (dblclick)="showRoleControlInfo('edit',item)" [attr.title]="item.sDeptname">{{item.sDeptname}}</td>
            <td>
              <a class="btn-xs btn-primary" (click)="showRoleControlInfo('edit',item)">
                <i class="fa fa-edit" title="编辑"></i>编辑</a>
              <a class="btn-xs btn-primary" (click)="delRole(item)">
                <i class="iconfont icon-iconzhenghe62" title="删除"></i>删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="box-footer clearfix">
      <app-pagination [currentPageNum]="roleListPageInfo.currentPageNum" [pagesShow]="" [totalPages]="roleListPageInfo.totalPages"
        (pageChanged)="rolePageNavigation($event)">
        <div class="pull-left pagination-detail" data-pagination-additional="true">
          <span class="pagination-info">
            当前显示第{{roleListPageInfo.startRow}}到第{{roleListPageInfo.endRow}}条，总共{{roleListPageInfo.total}}条，
          </span>
          <span class="page-list">
            每页记录
            <span class="btn-group dropup">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="page-size">{{roleListPageInfo.pageSize}}</span>
          <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li *ngFor="let i of roleListPageInfo.pageList" role="menuitem" [class.active]="roleListPageInfo.pageSize === i" (click)="rolepageSizeChange(i)">
              <a>{{i}}</a>
            </li>
          </ul>
          </span>
          条
          </span>
        </div>
      </app-pagination>
    </div>
  </div>
</div>



<!-- 新增编辑角色modal -->
<div class="modal" id="role-control-info">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button (click)="tabActive()" type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" *ngIf="isEditOrAddModal == 'add'">新增角色</h4>
        <h4 class="modal-title" *ngIf="isEditOrAddModal == 'edit'">编辑角色</h4>
      </div>
      <div class="modal-body" style="padding-bottom:0px;">
        <div class="nav-tabs-custom">
          <ul class="nav nav-tabs">
            <li class="active" id="tab1">
              <a href="#tab_1" id="tabOneContent" data-toggle="tab">基本信息</a>
            </li>
            <li *ngIf="isEditOrAddModal == 'edit'" id="tab2">
              <a href="#tab_2" id="tabTwoContent" data-toggle="tab">菜单权限</a>
            </li>
            <li *ngIf="isEditOrAddModal == 'edit'" id="tab3" (click)="getDataAuthority()">
              <a href="#tab_3" id="tabThridContent" data-toggle="tab">数据权限</a>
            </li>
            <li *ngIf="isEditOrAddModal == 'edit'" id="tab4">
              <a href="#tab_4" id="tabFourContent" data-toggle="tab">文档权限</a>
            </li>
          </ul>
          <div class="tab-content">
            <!-- 基本信息 -->
            <div class="tab-pane active" id="tab_1">
              <div class="box box-default" style="box-shadow:none;">
                <div class="box-body">
                  <form action="" #roleAddOrEditForm="ngForm">
                    <div class="form-group col-lg-12">
                      <label class="col-lg-2 text-right">
                        <span class="span-style">*</span>角色名称:</label>
                      <div class="col-lg-3" [class.has-error]="sAddOrEditRolename.valid ===false && (sAddOrEditRolename.dirty || sAddOrEditRolename.touched)">
                        <input class="form-control" type="text" id="sAddOrEditRolename" [(ngModel)]="roleAddOrEditInfo.sRolename" #sAddOrEditRolename="ngModel"
                          name="sAddOrEditRolename" maxlength="100" placeholder="请输入角色名称" required>
                      </div>
                      <label class="col-lg-2 text-right">所属部门:</label>
                      <div class="col-lg-3">
                        <select class="form-control sDeptcode" [(ngModel)]="roleAddOrEditInfo.sDeptcode" name="sDeptcode">
                          <option [value]="''" selected="selected">--请选择--</option>
                          <option value="{{item.sDeptcode}}" *ngFor="let item of deptList">{{item.sDeptname}}</option>
                        </select>
                      </div>
                    </div>

                    <div class="form-group col-lg-12">
                      <label class="col-lg-2 text-right">角色描述:</label>
                      <div class="col-lg-8">
                        <textarea style="width:100%" class="form-control" id="sAddOrEditDesc" maxlength="250" [(ngModel)]="roleAddOrEditInfo.sDesc"
                          name="sAddOrEditDesc" placeholder="" cols="15" rows="5"></textarea>
                      </div>
                    </div>

                    <div class="form-group col-lg-12">
                      <label class="col-lg-2 text-right">角色用户:</label>
                      <div class="col-lg-8">
                        <table class="table table-bordered table-hover table-striped">
                          <thead>
                            <th>域名</th>
                            <th>用户名</th>
                            <th>部门</th>
                            <th>操作</th>
                          </thead>
                          <tbody>
                            <tr *ngFor="let item of roleUserList">
                              <td></td>
                              <td>{{item.sRealname}}</td>
                              <td>{{item.sDeptname}}</td>
                              <td>
                                <a class="btn-xs btn-primary" (click)="delRoleUser(item.sUsername,item.sRealname)">
                                  <i class="iconfont icon-iconzhenghe62" title="删除"></i>删除</a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                    <div class="form-group col-lg-12">
                      <button type="button" class="btn btn-primary" (click)="showAddUser()">
                        <i class="fa fa-plus"></i>添加用户</button>
                    </div>

                  </form>
                  <button type="button" class="btn btn-default btn-flat pull-left" (click)="tabActive()" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary pull-right" (click)="addOrEditRole()">保存</button>
                </div>
              </div>
            </div>
            <!-- 菜单权限 -->
            <div class="tab-pane" id="tab_2">
              <div class="box box-default" style="box-shadow:none;">
                <div class="box-body">
                  <div class="form-inline">
                    <div class="form-group col-lg-12">
                      <div class="col-lg-5" style="border:1px solid #ddd;padding:20px;margin-left:20px">
                        <ul id="menuZtree" class="ztree"></ul>
                      </div>

                      <div class="col-lg-6" style="border:1px solid #ddd;padding:20px;margin-left:20px">
                        <div style="overflow-x:scroll;width:100%;">
                          <table class="table table-bordered table-hover table-striped table-keep-line">
                            <thead>
                              <th style="text-align:center">
                                <div class="checkbox checkbox-primary">
                                  <input type="checkbox" id="isCheckedAll3" [(ngModel)]="isCheckedAll3" (ngModelChange)="checkedAll(menuResourceList,isCheckedAll3)">
                                  <label>
                                  </label>
                                </div>
                              </th>
                              <th>菜单按钮</th>
                              <th>按钮名称</th>
                            </thead>
                            <tbody>
                              <tr *ngFor="let item of menuResourceList">
                                <td style="text-align:center">
                                  <div class="checkbox checkbox-primary">
                                    <input type="checkbox" id="checkbox1" [(ngModel)]="item.checked" (ngModelChange)="ctrlCheckAll(menuResourceList,'menuCheckAll')"
                                      name="checkbox1">
                                    <label>
                                    </label>
                                  </div>
                                </td>
                                <td>{{item.id}}</td>
                                <td>{{item.value}}</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                  <button type="button" class="btn btn-default btn-flat pull-left" (click)="tabActive()" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary pull-right" (click)="updateMenuAuthority()">保存</button>
                </div>
              </div>
            </div>
            <!-- 数据权限 -->
            <div class="tab-pane" id="tab_3">
              <div class="box box-default" style="box-shadow:none;">
                <div class="box-body" style="padding-bottom:0px;">

                  <div class="data-wrapper col-lg-12">
                    <div class="form-inline">
                      <div class="form-divider col-lg-12" title="产品数据" style="margin-top:10px;margin-bottom:20px;">
                        <div class="form-group col-lg-12 groupBottom" *ngIf="dataAuthorityList.length != 0">
                          <label for="" class="col-lg-2">产品分类：</label>
                          <div class="checkbox checkbox-info">
                            <input type="checkbox" id="checkboxAll1" name="isCheckedAll1" [(ngModel)]="isCheckedAll1" (ngModelChange)="checkedAll(dataAuthorityList,isCheckedAll1)">
                            <label>全选
                            </label>
                          </div>
                          <div class="checkbox checkbox-info" *ngFor="let item of dataAuthorityList">
                            <input type="checkbox" id="checkbox1" name="checkbox1" [(ngModel)]="item.checked" (ngModelChange)="ctrlCheckAll(dataAuthorityList,'fundTypeCheckAll')">
                            <label>{{item.value}}</label>
                          </div>

                        </div>
                        <div class="form-group col-lg-12 groupBottom">
                          <label for="" class="col-lg-2">基金代码：</label>
                          <div class="">
                            <select class="form-control select2 fields-select" multiple="multiple" style="margin-left:7px;width:80%" name="fundSelectedCodeList"
                              [(ngModel)]="fundSelectedCodeList">
                              <option [value]="it.id" *ngFor="let it of fundCodeList">{{it.id}}-{{it.value}}</option>
                            </select>
                          </div>
                        </div>

                      </div>
                    </div>
                  </div>

                  <button type="button" class="btn btn-default btn-flat pull-left" (click)="tabActive()" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary pull-right" (click)="updateInfoAuthority('数据权限')">保存</button>
                </div>

              </div>
            </div>
            <!-- 文档权限 -->
            <div class="tab-pane" id="tab_4">
              <div class="box box-default" style="box-shadow:none;">
                <div class="box-body">
                  <div class="data-wrapper col-lg-12">
                    <div class="form-inline">
                      <div class="form-divider col-lg-12" title="产品文档">
                        <!-- 公募 -->
                        <div class="form-group col-lg-12 groupBottom" *ngIf="documentAuthorityPublicList.length != 0">
                          <label for="" class="col-lg-2">{{documentAuthorityPublicLableName}}：</label>
                          <div class="checkbox checkbox-info">
                            <input type="checkbox" id="isCheckedDocumentPublic" name="isCheckedDocumentPublic" [(ngModel)]="isCheckedDocumentPublic"
                              (ngModelChange)="checkedAll(documentAuthorityPublicList,isCheckedDocumentPublic)">
                            <label>全选
                            </label>
                          </div>
                          <div class="checkbox checkbox-info" *ngFor="let x of documentAuthorityPublicList">
                            <input type="checkbox" id="checkbox1" name="checkbox1" [(ngModel)]="x.checked" (ngModelChange)="ctrlCheckAll(documentAuthorityPublicList,'documentPublicCheckAll')">
                            <label>{{x.value}}</label>
                          </div>
                        </div>
                        <!-- 公募end -->
                        <!-- 一对多 -->
                        <div class="form-group col-lg-12 groupBottom" *ngIf="documentAuthorityOtmList.length != 0">
                          <label for="" class="col-lg-2">{{documentAuthorityOtmLableName}}：</label>
                          <div class="checkbox checkbox-info">
                            <input type="checkbox" id="isCheckedDocumentOtm" name="isCheckedDocumentOtm" [(ngModel)]="isCheckedDocumentOtm" (ngModelChange)="checkedAll(documentAuthorityOtmList,isCheckedDocumentOtm)">
                            <label>全选
                            </label>
                          </div>
                          <div class="checkbox checkbox-info" *ngFor="let x of documentAuthorityOtmList">
                            <input type="checkbox" id="checkbox1" name="checkbox1" [(ngModel)]="x.checked" (ngModelChange)="ctrlCheckAll(documentAuthorityOtmList,'documentOtmCheckAll')">
                            <label>{{x.value}}</label>
                          </div>
                        </div>
                        <!-- 一对多end -->
                        <!-- 一对一 -->
                        <div class="form-group col-lg-12 groupBottom" *ngIf="documentAuthorityOtoList.length != 0">
                          <label for="" class="col-lg-2">{{documentAuthorityOtoLableName}}：</label>
                          <div class="checkbox checkbox-info">
                            <input type="checkbox" id="isCheckedDocumentOto" name="isCheckedDocumentOto" [(ngModel)]="isCheckedDocumentOto" (ngModelChange)="checkedAll(documentAuthorityOtoList,isCheckedDocumentOto)">
                            <label>全选
                            </label>
                          </div>
                          <div class="checkbox checkbox-info" *ngFor="let x of documentAuthorityOtoList">
                            <input type="checkbox" id="checkbox1" name="checkbox1" [(ngModel)]="x.checked" (ngModelChange)="ctrlCheckAll(documentAuthorityOtoList,'documentOtoCheckAll')">
                            <label>{{x.value}}</label>
                          </div>
                        </div>
                        <!-- 一对一end -->
                        <!-- 企业年金 -->
                        <div class="form-group col-lg-12 groupBottom" *ngIf="documentAuthorityAnnuityList.length != 0">
                          <label for="" class="col-lg-2">{{documentAuthorityAnnuityLableName}}：</label>
                          <div class="checkbox checkbox-info">
                            <input type="checkbox" id="isCheckedDocumentAnnuity" name="isCheckedDocumentAnnuity" [(ngModel)]="isCheckedDocumentAnnuity"
                              (ngModelChange)="checkedAll(documentAuthorityAnnuityList,isCheckedDocumentAnnuity)">
                            <label>全选
                            </label>
                          </div>
                          <div class="checkbox checkbox-info" *ngFor="let x of documentAuthorityAnnuityList">
                            <input type="checkbox" id="checkbox1" name="checkbox1" [(ngModel)]="x.checked" (ngModelChange)="ctrlCheckAll(documentAuthorityAnnuityList,'documentAnnuityCheckAll')">
                            <label>{{x.value}}</label>
                          </div>
                        </div>
                        <!-- 企业年金end -->
                        <!-- 养老金产品 -->
                        <div class="form-group col-lg-12 groupBottom" *ngIf="documentAuthorityOldageProList.length != 0">
                          <label for="" class="col-lg-2">{{documentAuthorityOldageProLableName}}：</label>
                          <div class="checkbox checkbox-info">
                            <input type="checkbox" id="isCheckedDocumentOldagePro" name="isCheckedDocumentOldagePro" [(ngModel)]="isCheckedDocumentOldagePro"
                              (ngModelChange)="checkedAll(documentAuthorityOldageProList,isCheckedDocumentOldagePro)">
                            <label>全选
                            </label>
                          </div>
                          <div class="checkbox checkbox-info" *ngFor="let x of documentAuthorityOldageProList">
                            <input type="checkbox" id="checkbox1" name="checkbox1" [(ngModel)]="x.checked" (ngModelChange)="ctrlCheckAll(documentAuthorityOldageProList,'documentOldageProCheckAll')">
                            <label>{{x.value}}</label>
                          </div>
                        </div>
                        <!--养老金产品end -->
                        <!-- 养老基金 -->
                        <div class="form-group col-lg-12 groupBottom" *ngIf="documentAuthorityOldageList.length != 0">
                          <label for="" class="col-lg-2">{{documentAuthorityOldageLableName}}：</label>
                          <div class="checkbox checkbox-info">
                            <input type="checkbox" id="isCheckedDocumentOldage" name="isCheckedDocumentOldage" [(ngModel)]="isCheckedDocumentOldage"
                              (ngModelChange)="checkedAll(documentAuthorityOldageList,isCheckedDocumentOldage)">
                            <label>全选
                            </label>
                          </div>
                          <div class="checkbox checkbox-info" *ngFor="let x of documentAuthorityOldageList">
                            <input type="checkbox" id="checkbox1" name="checkbox1" [(ngModel)]="x.checked" (ngModelChange)="ctrlCheckAll(documentAuthorityOldageList,'documentOldageCheckAll')">
                            <label>{{x.value}}</label>
                          </div>
                        </div>
                        <!--养老基金end -->
                        <!-- 社保基金 -->
                        <div class="form-group col-lg-12 groupBottom" *ngIf="documentAuthoritySocialList.length != 0">
                          <label for="" class="col-lg-2">{{documentAuthoritySocialLableName}}：</label>
                          <div class="checkbox checkbox-info">
                            <input type="checkbox" id="isCheckedDocumentSocial" name="isCheckedDocumentSocial" [(ngModel)]="isCheckedDocumentSocial"
                              (ngModelChange)="checkedAll(documentAuthoritySocialList,isCheckedDocumentSocial)">
                            <label>全选
                            </label>
                          </div>
                          <div class="checkbox checkbox-info" *ngFor="let x of documentAuthoritySocialList">
                            <input type="checkbox" id="checkbox1" name="checkbox1" [(ngModel)]="x.checked" (ngModelChange)="ctrlCheckAll(documentAuthoritySocialList,'documentSocialCheckAll')">
                            <label>{{x.value}}</label>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <button type="button" class="btn btn-default btn-flat pull-left" (click)="tabActive()" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary pull-right" (click)="updateInfoAuthority('文档权限')">保存</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 添加角色用户modal -->
<div class="modal" id="add-role-user">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="showRoleControlInfo()">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">角色选择用户</h4>
      </div>
      <div class="modal-body">
        <div class="box box-default" style="box-shadow:none;">
          <div class="box-body">
            <div class="form-inline">
              <div class="form-group col-lg-5" style="border:1px solid #ddd;padding:20px;margin-left:15px">
                <ul id="deptZtree" class="ztree"></ul>
              </div>

              <div class="form-group col-lg-6" style="border:1px solid #ddd;padding:20px;margin-left:15px">
                <table class="table table-bordered table-hover table-striped">
                  <thead>
                    <th style="text-align:center">
                      <div class="checkbox checkbox-primary">
                        <input type="checkbox" id="checkboxAll" name="isCheckedAll" [(ngModel)]="isCheckedAll" (ngModelChange)="checkedAll(staffList,isCheckedAll)">
                        <label>
                        </label>
                      </div>
                    </th>
                    <th>域名</th>
                    <th>用户名</th>
                    <th>部门名称</th>
                  </thead>
                  <tbody>
                    <tr style="border-collapse:none !important" *ngFor="let item of staffList">
                      <td>
                        <div class="checkbox checkbox-primary">
                          <input type="checkbox" id="deptCheckAll" name="deptCheckAll" [(ngModel)]="item.checked" (ngModelChange)="ctrlCheckAll(staffList,'deptCheckAll')">
                          <label>
                          </label>
                        </div>
                      </td>
                      <td></td>
                      <td>{{item.sRealname}}</td>
                      <td>{{item.sDeptname}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default " data-dismiss="modal" (click)="hideUserModal()">取消</button>
        <button type="button" class="btn btn-primary" (click)="addRoleUser()">确定</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>